<!--  -->
<template>
  <div id="cart">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="info">
      <span>30天无忧退货</span>
      <span>48小时快速退款</span>
      <span>满88元免邮费</span>
    </div>
    
    
    <div class="list">
      <div class="cartItem" v-for="(item,index) in cartList" :key="index"> 
        <van-checkbox @change="checkEvent($event,item)" v-model="item.checked"></van-checkbox>
        <van-image
          fit="contain"
          width="70"
          height="70"
          :src="item.list_pic_url"
        />
        <div class="proBrief">
          <div class="title">
            <span>{{item.goods_name}}</span>
            <span>X{{item.number}}</span>
          </div>
          <p class="brief">{{item.goods_specifition_name_value}}</p>
          <p class="price">￥ {{item.retail_price}}</p>

        </div>
      </div>
    </div>

      <van-submit-bar :price="cartTotal.checkedGoodsAmount*100" button-text="下单" @submit="onSubmit">
        <van-checkbox v-model="checkedAll">
          全选
        </van-checkbox>       
      </van-submit-bar>
    
    <!-- <tab-btn></tab-btn> -->
  </div>
</template>

<script>
import tabBtn from '../components/tabBtn'
import {mapState} from 'vuex'
import axios from 'axios'
let mapStateObj = mapState(['cartList','cartTotal'])
export default {
  data () {
    return {
      checked: false,
    }
  },
  computed: {
    checkedAll: {
      set() {
        console.log('设置全选')
        
      },
      get() {
        if (this.cartTotal.goodsCount == this.cartTotal.checkedGoodsCount) {
          return true
        }else {
          return false
        }
      }
    },
    ...mapStateObj
  },
  methods: {
    onSubmit() {

    },
    onClickLeft() {
      this.$router.push('/')
    },
    async checkEvent(event,item) {
      console.log(event,item)
      let res = await axios.post(this.$root.api.CartChecked,{isChecked: Number(event),productIds: item.product_id})
      let data = res.data.data
      console.log(data)
      this.$store.commit('SETCARTLIST', data.cartList)
      this.$store.commit('SETCARTTOTAL', data.cartTotal)

    }
  },
  created() {
    this.$store.dispatch('setCart')
    },
  mounted() {
    // console.log(this.cartList)
    // console.log(this.cartTotal)
  },
  components: {
    tabBtn
  }
}
</script>

<style lang="less" scoped>
  #cart{
    P{
      margin: 0;
    }
    .info{
      display: flex;
      justify-content: space-around;
      font-size: 12px;
      color: #999;
      height: 24px;
      line-height: 24px;
      background: #efefef;
      span{
        position: relative;
      }
      span::before{
        content: "";
        display: block;
        position: absolute;
        left: -9px;
        top: 9px;
        width: 4px;
        height: 4px;
        border-radius: 3px;
        border: 1px solid red;
      }
    }
    .cartItem{
      display: flex;
      align-items: center;
      padding: 10px 5px;
      border-bottom: 1px solid #e8e8e8;
      /deep/.van-image__img{
        background: #efefef;
      }
      .van-checkbox{
        margin: 0 5px;
      }
      .proBrief{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        height: 70px;
        padding: 0 10px;
        .title{
          width: 100%;
          font-size: 14px;
          display: flex;
          justify-content: space-between;
        }
        .brief{
          color: #999;
          font-size: 12px;
        }
        
      }
      
    }
  }

</style>
